<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-07-20 09:10:05
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-08-11 14:31:54
 * @FilePath: \cxl-h5\src\components\confirmPopup\Index.vue
-->
<template>
    <Transition name="fade" mode="out-in" appear>
        <section class="confirm-popup-bg" v-if="modelValue"></section>
    </Transition>
    <Transition name="scale" mode="out-in" appear>
        <section class="confirm-popup" v-if="modelValue">
            <section class="box">
                <section class="main">
                    <!-- 标题 -->
                    <section class="title" v-if="props.title">{{ props.title }}</section>
                    <!-- 内容 -->
                    <section class="content">{{ props.content }}</section>
                    <!-- 按钮 -->
                    <section class="botton">
                        <span @click="emits('cancel')" v-if="props.cancelBtn">取消</span>
                        <i v-if="props.cancelBtn"></i>
                        <span @click="emits('confirm')">确定</span>
                    </section>
                </section>
            </section>
        </section>
    </Transition>
</template>

<script setup lang="ts">
//接收来自父级的参数
const props = defineProps(['title', 'content', 'modelValue', 'cancelBtn'])
//注册父级回调
const emits = defineEmits(['cancel', 'confirm', 'update:modelValue'])
</script>

<style lang="scss" scoped>
.confirm-popup-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.5);
}
.confirm-popup {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
}
.box {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    box-sizing: border-box;
    padding: var(--cxl-size-30);
    .main {
        background-color: var(--cxl-color-white);
        border-radius: var(--cxl-size-6);
        box-sizing: border-box;
        padding-top: var(--cxl-size-10);

        .title {
            font-size: var(--cxl-size-18);
            font-weight: 600;
            text-align: center;
            padding: var(--cxl-size-10) 0 var(--cxl-size-6) 0;
        }
        .content {
            box-sizing: border-box;
            padding: var(--cxl-size-20);
            font-size: var(--cxl-size-15);
            text-align: center;
        }
        .botton {
            display: flex;
            overflow: hidden;
            border-top: 1px solid var(--cxl-color-f5f5f5);
            span {
                width: 50%;
                font-size: var(--cxl-size-16);
                display: block;
                line-height: var(--cxl-size-40);
                text-align: center;
                box-sizing: border-box;
                flex: 1;
            }
            i {
                display: block;
                height: var(--cxl-size-40);
                width: 1px;
                background-color: var(--cxl-color-f5f5f5);
            }
        }
    }
}
</style>
